<template>
  <div class="container">
    <!-- 导航条 -->
    <van-nav-bar left-arrow @click-left="$router.back()" title="编辑资料"></van-nav-bar>

    <!-- 编辑区 -->
    <van-cell-group >
    <input type="file" hidden @change="hPhotoChange" ref="formData">
      <van-cell is-link title="头像"  center @click="changeImg">
        <van-image
          slot="default"
          width="1.5rem"
          height="1.5rem"
          fit="cover"
          round
        :src="Userlist.photo"
        />
      </van-cell>

      <van-cell is-link :title="Userlist.name" @click="showTitle=true"/>

      <van-cell is-link :title="Userlist.gender===1?'男':'女'" @click="changeGender"/>

      <van-cell is-link :title="Userlist.birthday" @click="showBirthday=true"/>
    </van-cell-group>

    <van-dialog v-model="showTitle" title="修改名字" show-cancel-button  @confirm="updateName">
        <van-field v-model.trim="newName"/>
    </van-dialog>
    <van-dialog v-model="showGender" title="修改性别" show-cancel-button  @confirm="updateName">
        <van-radio-group v-model="radio" direction="horizontal" style="height:50px">
  <van-radio name="1">男</van-radio>
  <van-radio name="2">女 </van-radio>
</van-radio-group>
    </van-dialog>

    <!-- 修改时间 -->
    <van-popup v-model="showBirthday" position="bottom">
  <van-nav-bar title="修改生日">
  </van-nav-bar>
  <!-- min-date：  dateTime-picker中最小时间 -->
  <!-- max-date：  dateTime-picker中最小时间 -->
  <van-datetime-picker
    v-model="newDate"
    type="date"
    title="选择年月日"
    @cancel="showBirthday=false"
    @confirm="updateBirthday"
    :min-date="minDate"
    :max-date="maxDate"
  />
</van-popup>
  </div>
</template>

<script>
import { userGetInfo, updatePhoto, updateUserInfo } from '@/api/user'
// 引入时间处理插件
import dayjs from 'dayjs'
export default {
  data () {
    return {
      Userlist: [], // 页面数据
      showTitle: false, // 名字弹框
      showGender: false, // 性别弹框
      showBirthday: false, // 时间弹框
      newName: ''

    }
  },
  mounted () {
    this.loadUser()
  },
  methods: {
    // 渲染页面
    loadUser () {
      // 调用接口
      userGetInfo().then((res) => {
        console.log(res)
        this.Userlist = res.data.data
      }).catch((err) => {
        console.log(err)
      })
    },
    // 修改头像
    changeImg () {
      this.$refs.formData.click()
    },
    // 点击头像触发上传
    hPhotoChange () {
      // this.$refs.refPhoto就是页面上的input文件域。
      // 它有一个属性files，是一个集合，其中就放置着当前用户选中的文件
      const file = this.$refs.formData.files[0]
      if (!file) return
      const fd = new FormData()
      fd.append('photo', file)
      this.$toast.loading({
        message: '图片正在上传中...',
        duration: 0, // 持续展示 toast,永远不会关闭
        overlay: true // 整体添加一个遮罩
      })
      updatePhoto(fd).then((res) => {
        this.Userlist.photo = res.data.data.photo // 回填真实数据
        console.log(res)
        this.$toast.success('修改头像成功')
      }).catch((err) => {
        console.log(err)
        this.$toast.fail('修改头像失败')
      })
    },
    // 修改名字
    updateName () {
      const nameData = {
        name: this.newName
      }
      updateUserInfo(nameData).then((res) => {
        console.log(res)
        this.Userlist.name = res.data.data.name
        this.$toast.success('修改成功啦')
      }).catch((err) => {
        console.log(err)
        this.$toast.fail('修改失败了')
      })
    },
    // 修改性别
    changeGender () {
      this.showGender = true
    },
    // 修改生日
    updateBirthday (val) {
      // 接口中需要的格式是： 2018-12-20
      // 需进行日期时间的格式转换
      val = dayjs(val).format('YYYY-MM-DD')
      updateUserInfo({ birthday: val }).then(res => {
        // 更新本地视图
        this.Userlist.birthday = val
        this.showBirthday = false
        this.$toast.success('修改成功')
      }).catch(() => {
        this.$toast.fail('修改失败')
      })
    }
  }
}
</script>
